<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="StyleSheet" type="text/css" href="/tpa/jquery-ui.css" />
      <link rel="StyleSheet" type="text/css" href="/tpa/admin.css" />
      <script type="text/javascript" src="/lib/js/jquery.js"></script>
      <script type="text/javascript" src="/lib/js/meccano.js"></script>
      <style type="text/css">
         .section {
            background: #E8E8E8;
            border: 1px solid #CCC;
            padding: 3px 0 3px 5px;
            margin: 15px 0 5px 0;
            width: 99%;
            text-transform: uppercase;
            font-weight: bold;
         }
         .section a {
            display: inline-block;
            margin-right: 20px;
            vertical-align: middle;
         }
         .variable {
            clear: both;
         }
         #configure table {
            border: 0px;
            width: 99%;
            margin: 0 0 5px 0;
         }
         #configure table tr:hover {
            background-color: #FAFAFA;
         }
         .descr {
            padding: 5px 15px;
            border-right: 1px solid #CCC;
            border-bottom: 1px dotted #CCC;
            width:75%;
         }
         .sett {
            width: 25%;
            border-bottom: 1px dotted #CCC;
            vertical-align: middle;
         }
         .fv {width:220px;}
      </style>
      <script type="text/javascript">
         $(document).ready(function(){
            $('#configure .section a').mouseover(function(){
               $(this).addClass('ui-state-hover');
            }).mouseout(function(){
               $(this).removeClass('ui-state-hover');
            }).click(function(){
               $(this).parent().next().slideToggle();
               $('span', this).toggleClass('ui-icon-circle-triangle-n').toggleClass('ui-icon-circle-triangle-s');
               return false;
            });

            $('#configure select').change(function(){
               f_name = $(this).attr('name');
               f_val  = $(this).val();
               if(conf[f_name] != f_val) changed[f_name] = true;
               else changed[f_name] = false;
               updateChangeStatus();
            });
            $('#configure input').bind('keyup', function(){
               f_name = $(this).attr('name');
               f_val  = $(this).val();
               if(conf[f_name] != f_val) changed[f_name] = true;
               else changed[f_name] = false;
               updateChangeStatus();
            });
         });

         var conf = {{%strip%}
         {%foreach from=$data item='v' name='i'%}
         "{%$v.section%}__{%$v.name%}": "{%$v.value|escape:'javascript'%}"
         {%if !$smarty.foreach.i.last%},{%/if%}
         {%/foreach%}
         {%/strip%}};
         var changed = {};

         function updateChangeStatus()
         {
            var show = false;
            for(var x in changed)
            {
               if(changed[x] && !show)
               {
                  show = true;
               }
            }
            if(show) meccano.dialog("System configurations was changed, you need to save them.", {'Save': saveConfig,'Revert':resetConfig});
            else meccano.hideNotification();
         }

         function resetConfig()
         {
            for(var x in changed)
            {
               changed[x] = false;
               $('#'+x).val(conf[x]);
            }
            updateChangeStatus();
         }

         function applayConfig()
         {
            for(var x in changed)
            {
               if(changed[x])
               {
                  conf[x] = $('#'+x).val();
                  changed[x] = false;
               }
            }
            updateChangeStatus();
         }

         function saveConfig()
         {
            var tosave = {};
            var sv = false;
            for(var x in changed)
            {
               if(changed[x])
               {
                  tosave['f['+x+']'] = $('#'+x).val();
                  sv = true;
               }
            }
            if(sv)
            {
               $.post('{%$category->href%}', tosave, function(r){
                  if(r)
                  {
                     applayConfig();
                  }
               }, 'json');
            }
         }
      </script>
   </head>
   <body>
      <div id="configure">
         {%assign var='section' value=''%}
         {%foreach from=$data item='v' name='i'%}

         {%if $authorizedUser->id eq 1 || $blocks[$v.section].enabled%}

         {%if $v.section neq $section%}
         {%if !empty($section)%}
         </table></div>
         {%/if%}
         {%assign var='section' value=$v.section%}
         <div class="section">
            <a href="#" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-{%if $blocks[$v.section].enabled%}n{%else%}s{%/if%}"></span></a>
            {%$section%}
         </div>

         <div{%if !$blocks[$v.section].enabled%} style="display:none;"{%/if%}><table>
         {%/if%}
         <tr>
            <td class="descr">
               <b>{%$v.name%}</b><br />
               {%$v.hint%}
            </td>
            <td class="sett">
              {%if $v.type eq 'bool'%}
               <select name="{%$v.section%}__{%$v.name%}" id="{%$v.section%}__{%$v.name%}">
                  <option value="0"{%if $v.value eq 0%} selected{%/if%}>{%$TR->meccano->no%}</option>
                  <option value="1"{%if $v.value eq 1%} selected{%/if%}>{%$TR->meccano->yes%}</option>
               </select>
               {%elseif $v.type eq 'list'%}
               <input type="text" name="{%$v.section%}__{%$v.name%}" id="{%$v.section%}__{%$v.name%}" value="{%','|join:$v.value%}" class="fv" />
               {%else%}
               <input type="text" name="{%$v.section%}__{%$v.name%}" id="{%$v.section%}__{%$v.name%}" value="{%$v.value|replace:'"':'&quot;'%}" class="fv" />
               {%/if%}
            </td>
         </tr>
         {%if $smarty.foreach.i.last%}</div>{%/if%}

         {%/if%}

      {%/foreach%}
      </div>
   </body>
</html>